<%
layout("/include/_container.html", {title:"收件箱", parent:"我的信箱"}){
%>
<!-- Left sidebar -->
<div class="white-box">
    <!-- row -->
    <div class="row">
        <div class="col-lg-2 col-md-3  col-sm-12 col-xs-12 inbox-panel">
            <div>
                <a href="${ctx}/mailCompose/sendLetter" class="btn btn-block btn--md btn-custom waves-effect waves-light">写信</a>
                <div class="list-group mail-list  m-t-20">
                    <a href="${ctx}/mailBox/list" class="list-group-item active">收件箱 <span
                            class="label label-rouded label-success pull-right">${noReadCount}/${mailBoxCount}</span></a>
                    <a href="${ctx}/mailCompose/list?status=1" class="list-group-item b-0">已发送 <span
                            class="label label-rouded label-warning pull-right">${mailComposeCount}</span></a>
                    <a href="${ctx}/mailCompose/list?status=0" class="list-group-item b-0">草稿箱 <span
                            class="label label-rouded label-default pull-right">${mailDraftCount}</span></a>
                </div>
                <h5 class="panel-title m-t-40 m-b-0">标签</h5>
                <hr class="m-t-5">
                <div class="list-group b-0 mail-list">
                    <a href="#" class="list-group-item"><span class="fa fa-circle text-info m-r-10"></span>工作</a>
                    <a href="#" class="list-group-item"><span class="fa fa-circle text-warning m-r-10"></span>家庭</a>
                    <a href="#" class="list-group-item"><span class="fa fa-circle text-purple m-r-10"></span>个人</a>
                    <a href="#" class="list-group-item"><span class="fa fa-circle text-danger m-r-10"></span>朋友</a>
                    <a href="#" class="list-group-item"><span class="fa fa-circle text-success m-r-10"></span>社交</a>
                </div>
            </div>
        </div>
        <div class="col-lg-10 col-md-9 col-sm-12 col-xs-12 mail_listing">
            <div class="inbox-center">
                <div class="row">
                    <div class="col-sm-6">
                        <h5>
                            收件箱 (总计${mailBoxCount}，未读${noReadCount })
                        </h5>
                    </div>
                    <div class="col-sm-6">

                    </div>
                </div>
            </div>

            <div class="row m-b-5">
                <div class="col-sm-6">
                    <div class="btn-group">
                        <button type="button" class="btn btn-info dropdown-toggle waves-effect waves-light" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">过滤</button>
                        <ul class="dropdown-menu">
                            <li><a href="#" onclick="setStatus(2)">全部</a></li>
                            <li><a href="#" onclick="setStatus(1)">已读</a></li>
                            <li><a href="#" onclick="setStatus(0)">未读</a></li>
                        </ul>
                    </div>

                    <div class="btn-group">
                        <button type="button" class="btn btn-info  waves-effect waves-light" onclick="refresh()"><i class="fa fa-refresh"></i></button>
                    </div>
                    <div class="btn-group">
                        <button class="btn btn-danger  waves-effect waves-light" onclick="deleteAll()"><i class="fa fa-trash-o">删除</i>
                        </button>
                    </div>
                </div>
                <div class="col-sm-6">
                    <form id="searchForm" modelAttribute="mailBox" action="${ctx}/mailBox/" method="post">
                        <input type="hidden" name="readstatus" id="readstatus"/>
                        <div class="input-group">
                            <input type="text"  name="mail.title" maxlength="128" class="form-control" placeholder="搜索邮件标题，正文等">
                            <span class="input-group-append">
                                <button id="search" type="button" class="btn waves-effect waves-light btn-custom"><i class="fa fa-search"></i> </button>
                            </span>
                        </div>
                    </form>
                </div>
            </div>

            <table id="table" class="table-bordered"></table>
        </div>
    </div>
    <!-- /.row -->
</div>

<script>
    $(document).ready(function () {
        $('#table').bootstrapTable({

            //请求方法
            method: 'post',
            //类型json
            dataType: "json",
            contentType: "application/x-www-form-urlencoded",
            //移动端自适应
            mobileResponsive: true,
            //最低显示2行
            minimumCountColumns: 2,
            //是否显示行间隔色
            striped: false,
            //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            cache: false,
            //允许列拖动大小
            resizable: true,
            //固定表头
            stickyHeader: true,
            stickyHeaderOffsetY: 0,
            //是否显示分页（*）
            pagination: true,
            //排序方式
            sortOrder: "asc",
            //初始化加载第一页，默认第一页
            pageNumber: 1,
            //每页的记录行数（*）
            pageSize: 10,
            //可供选择的每页的行数（*）
            pageList: [10, 25, 50, 100],
            //这个接口需要处理bootstrap table传递的固定参数,并返回特定格式的json数据
            url: "${ctx}/mailBox/data",
            //默认值为 'limit',传给服务端的参数为：limit, offset, search, sort, order Else
            //queryParamsType:'',
            ////查询参数,每次调用是会带上这个参数，可自定义
            queryParams: function (params) {
                var searchParam = $("#searchForm").serializeJSON();
                searchParam.pageNo = params.limit === undefined ? "1" : params.offset / params.limit + 1;
                searchParam.pageSize = params.limit === undefined ? -1 : params.limit;
                if (params.sort && params.order) {
                    searchParam.orderBy = params.sort + " " + params.order;
                } else {
                    searchParam.orderBy = "sendtime desc";
                }
                return searchParam;
            },
            //分页方式：client客户端分页，server服务端分页（*）
            sidePagination: "server",


            onShowSearch: function () {
                $("#search-collapse").fadeToggle();
            },
            columns: [{
                checkbox: true

            }
                , {
                    field: 'readstatus',
                    title: '状态',
                    sortable: true,
                    formatter: function (value, row, index) {
                        if (value == "1") {
                            return "<a data-show=\"true\" href=\"${ctx}/mailBox/detail?id=" + row.id + "\" class=\"badge badge-success\" >已读</a>";
                        } else {
                            return "<a data-show=\"true\" href=\"${ctx}/mailBox/detail?id=" + row.id + "\"  class=\"badge badge-danger\" >未读</a>";
                        }
                    }
                }
                , {
                    field: 'sender.name',
                    title: '发件人'

                }, {
                    field: 'mail.title',
                    title: '标题',
                    sortable: true,
                    formatter: function (value, row, index) {
                        return jp.unescapeHTML(value);
                    }

                }
                , {
                    field: 'mail.overview',
                    title: '内容',
                    sortable: true,
                    formatter: function (value, row, index) {
                        return jp.unescapeHTML(value);
                    }

                }, {
                    field: 'sendtime',
                    title: '时间',
                    sortable: true

                }

                , {
                    field: 'operate',
                    title: '操作',
                    align: 'center',
                    class: "text-nowrap",
                    events: {
                        'click .view': function (e, value, row, index) {
                            jp.go("${ctx}/mailBox/detail?id=" + row.id);
                        },

                        'click .del': function (e, value, row, index) {
                            jp.confirm('确认删除该站内信吗？', function () {
                                jp.loading();
                                jp.get("${ctx}/mailBox/delete?id=" + row.id, function (data) {
                                    if (data.success) {
                                        $('#table').bootstrapTable('refresh');
                                        jp.success(data.msg);
                                    } else {
                                        jp.error(data.msg);
                                    }
                                })

                            });

                        }
                    },
                    formatter: function operateFormatter(value, row, index) {
                        return [
                            '<a  class="view btn btn-icon waves-effect waves-light btn-custom btn-xs m-r-5"><i class="fa-search fa"></i></a>',
                            '<a  class="del btn btn-icon waves-effect waves-light btn-danger btn-xs"><i class="fa fa-trash-o"></i></a>'
                        ].join('');
                    }
                }

            ]

        });

        $('#table').on('check.bs.table uncheck.bs.table load-success.bs.table ' +
            'check-all.bs.table uncheck-all.bs.table', function () {
            $('#remove').prop('disabled', !$('#table').bootstrapTable('getSelections').length);
            $('#edit').prop('disabled', $('#table').bootstrapTable('getSelections').length != 1);
        });


        $("#search").click("click", function () {// 绑定查询按扭
            refresh();
        });


    });

    function refresh() {
        $('#table').bootstrapTable('refresh');
    }

    function setStatus(index) {
        if (index == 1) {
            $("#readstatus").val("1");
        } else if (index == 0) {
            $("#readstatus").val("0");
        } else {
            $("#readstatus").val("");
        }
        refresh();
    }

    function getIdSelections() {
        return $.map($("#table").bootstrapTable('getSelections'), function (row) {
            return row.id
        });
    }

    function deleteAll() {

        jp.confirm('确认要删除该定时任务记录吗？', function () {
            var index = jp.loading();
            jp.get("${ctx}/mailBox/deleteAll?ids=" + getIdSelections(), function (data) {
                jp.close(index);
                if (data.success) {
                    $('#table').bootstrapTable('refresh');
                    jp.toastr_success(data.msg);
                } else {
                    jp.toastr_error(data.msg);
                }
            })

        })
    }
</script>


<% } %>